<template>
    <div style="position:relative">
        <Card :bordered="false" style="background:#fff;padding: 20px;width: 80vw;">
            <p slot="title">巡店详情</p>

            <div class="top">
                <span>分部名称：<b> {{ logDetail.branch_zw }} </b> </span>
                <span>巡店类型：<b> {{logDetail.type_zw}} </b> </span>
                <span>巡店人：<b> {{logDetail.username}} </b></span>
                <span>楼层：<b> {{logDetail.floor_zw}} </b></span>

            </div>

            <div class="tabs">
                <Tabs>
                    <TabPane v-for="(item,index) in logDetail.list" :key="'are'+ item.id" :label="item.name" :name="'tab'+index">
                        <div class="cardBox">
                            <div v-for="row in item.m_list" :key="'module'+ row.id">

                                <Card v-if="row.id == 0 " class="card">
                                    <p slot="title">{{ row.name }}</p>
                                    <Button size="small" slot="extra" type="primary" @click="workStationInfo(row.crm_detail)">查看详情</Button>

                                    <!-- <Row>
                                        <Col span="14">
                                        <section class="logItem">
                                            <span>空制工位/办公室：</span>
                                            <span> {{ row.crm_detail.vacant_ws_num }} </span>
                                        </section>

                                        <section class="logItem">
                                            <span>总体使用率：</span>
                                            <span>{{ row.crm_detail.use_rate+'%' }}</span>
                                        </section>
                                        </Col>

                                        <Col span="10">
                                        <section class="logItem">
                                            <span>已使用：</span>
                                            <span>{{ row.crm_detail.use_ws_num }}</span>
                                        </section>



                                        <section class="logItem">
                                            <span>办公人员：</span>
                                            <span>{{ row.crm_detail.person_num }}</span>
                                        </section>


                                        </Col>
                                    </Row> -->

                                </Card>

                                <Card v-else class="card">
                                    <p slot="title">{{row.name}}</p>
                                    <!-- <Button v-if="row.crm_detail.is_qualified == 0" size="small" slot="extra" type="success" @click="orderInfo">查看工单</Button> -->

                                    <Row>
                                        <!-- left -->
                                        <Col span="14">
                                        <section class="logItem">
                                            <span>是否合格：</span>
                                            <span :class="{error:row.crm_detail.is_qualified == 0}"> {{ row.crm_detail.is_qualified == 0?'不合格':'合格' }} </span>
                                        </section>

                                        <section class="logItem">
                                            <span>描述：</span>
                                            <span>{{row.crm_detail.describe}}</span>
                                        </section>

                                        <section class="logItem">
                                            <span>移交对象：</span>
                                            <span>{{row.crm_detail.deal_username}}</span>
                                        </section>
                                        </Col>

                                        <!-- right -->
                                        <Col span="10">
                                        <section class="logItem">
                                            <span>动作：</span>
                                            <span>{{row.crm_detail.action_zw}}</span>
                                        </section>

                                        <section class="logItem">
                                            <span>说明：</span>
                                            <span>{{ row.crm_detail.explain }}</span>
                                        </section>

                                        <section class="logItem">
                                            <span>抄送对象：</span>
                                            <span> {{row.crm_detail.copy_username}} </span>
                                        </section>
                                        </Col>
                                    </Row>

                                </Card>
                            </div>


                        </div>
                    </TabPane>
                </Tabs>
            </div>

            <Button @click="close" class="back" ghost type="primary">返回</Button>
        </Card>

        <Spin size="large" fix v-if="loading"></Spin>
    </div>
</template>

<script>
    import {
        mapMutations
    } from 'vuex'
    import axios from '@/libs/api.request'
    export default {
        name: 'log-details',
        data() {
            return {
                loading: false,
                // 日志id
                cfid: '',

                logDetail: []
            }
        },
        methods: {
            ...mapMutations(['myClose']),

            // 获取巡店详情
            getLogDetail() {
                this.loading = true
                let data = {
                    cfid: this.cfid
                }
                axios.ajax_post('admin-patrol_record-ajax_get_pr_detail', data).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.logDetail = res.data.data.cf_detail
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },
            // 关闭页面
            close() {
                this.myClose('log-details')
                this.$_changePage('check-log', '明细', {})
            },

            // // 查看工单
            // orderInfo() {
            //     this.$_changePage('order-details', '工单详情', {})
            // },

            // 查看工位详情
            workStationInfo(list) {
                let data = {
                    branchid: list.branchid,
                    floorid: list.floorid,
                    regionid: list.regionid,
                    cp_floorid: list.cp_floorid,
                    cp_branchid: list.cp_branchid,
                    cp_type: list.cp_type
                }
                this.myClose('workStationUseInfo')
                this.$_changePage('workStationUseInfo', '工位/办公室使用状态', data)
            }
        },
        created() {
            this.cfid = this.$route.params.id
            this.getLogDetail()
        },
        activated() {
            if (this.cfid != this.$route.params.id) {
                this.cfid = this.$route.params.id
                this.getLogDetail()
            }
        }

    }
</script>

<style lang='less' scoped>
    .top {
        margin-bottom: 30px;

        span {
            margin-right: 30px;
        }
    }

    .cardBox {
        padding: 20px 50px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap
    }

    .logItem {
        margin-bottom: 25px;
        font-weight: 700;

        span:first-of-type {
            color: #aaa
        }
    }

    .card {
        background: #fff;
        margin-bottom: 30px;
        margin-right: 30px;
        width: 30vw;
        // height: 300px;
    }

    .back {
        width: 100px;
        display: block;
        margin: 0px auto;
    }

    .error {
        color: red
    }
</style>